<template>
	<view class="pages_intelligence" :style="{paddingTop: `${search.height+search.top+10}px`}">
		<myTabs :title="title" @goBlack="goBlack" :mybackgroundColor="'#fff'"></myTabs>
		<image :style="{top: `${search.height+search.top+10}px`}" mode="widthFix" class="assessHeardImg"
			src="/static/img/maskingIcon.png"></image>
		<view v-if="assessObj" :style="{top: `${search.height+search.top+10}px`}" class="assess_heardBox">
			<p>品类现状评估</p>
			<p>·数据截{{assessObj.month | ff_month}}·</p>
		</view>
		<view v-if="assessObj && isLoading==2" :style="{top: `${search.height+search.top+10+115}px`}"
			class="assessBoxBig">
			<image class="assessBoxpdIcon"
				:src="assessObj.trend==1 ? '/static/img/yesIcon.png' : '/static/img/noIcon.png'"></image>

			<view class="assessBox">
				<view class="assessBoxOne">
					<p>评估结果</p>
					<p>“{{assessObj.marketType}}”</p>
					<!-- <p>{{assessObj.conclusionDesc}}</p>
					<p>结论是基于章鱼小数据数据库，算法模型复杂计算得出</p> -->
				</view>
				<view class="assessBoxOne_progressBar">
					<view class="assessBoxOne_progressBarTast" v-if="isFx>=0" :style="{left: `${myDirection}rpx`}">
						商机指数:{{assessObj.marketIndex}}
						<span
							:class="isFx==0? 'assessBoxOne_progressBarTastmy fxLeft' : isFx==1? 'assessBoxOne_progressBarTastmy fxRight' : 'assessBoxOne_progressBarTastmy'"></span>
					</view>
					<view class="assessBoxOne_progressBarBox">
						<u-line-progress :percentage="assessObj.marketIndex" height="17" :showText="false"
							activeColor="#FFCE00" inactiveColor="transparent"></u-line-progress>
					</view>
					<view class="assessBoxOne_progressBarBoxs">
						<view class="assessBoxOne_progressBarBoxItrems" v-for="(item,index) in barArr" :key="index">
							<span :style="{background : item.dianColor}"></span>
							<span>{{item.text}}</span>
						</view>
					</view>
				</view>
				<view class="assessVerdictBox">
					{{assessObj.conclusionDesc}}
				</view>

				<view class="cyinBgBox">
					<image @click="ff_previewImage(`${imgSrc}/typeBg.png`)" mode="aspectFill"
						:src="`${imgSrc}/typeBg.png`"></image>
				</view>

				<!-- · 关键分析如下 · -->
				<view class="analyseTitle">
					· 关键分析如下 ·
				</view>
				<view class="analyseTitleBox">
					<view class="analyseTitleBoxItems" v-for="(item,index) in colour" :key="index">
						<span :style="{background: item.bg}"></span>
						<span>{{item.name}}</span>
					</view>
				</view>
				<view class="analyseBox" @click="goPack(`/package/analyse/index?index=0&month=${assessObj.month}`)">
					<view class="pages_intelligenceHeard">
						<view class="pages_intelligenceHeardLeft">消费需求指数：<span
								:class="assessObj.consumeIndex==1?'rxiao':'hot'">{{assessObj.consumeIndex==1?'弱':'强'}}</span>
						</view>
						<view class="pages_informationHeardrIGHT">
							<u-icon name="arrow-right" color="#333" size="26rpx" label="查看数据" labelPos="left"
								labelSize="26rpx" labelColor="#333"></u-icon>
						</view>
					</view>
					<view class="analyseMain">
						<view class="analyseMainItems">
							<view class="analyseMainItems_left">
								<p>热度指数<span
										:class="assessObj.hotIndex==1?'di':'gao'">{{assessObj.hotIndex==1?'低':'高'}}</span>
								</p>
								<p>{{assessObj.hotIndexDesc}}</p>
							</view>
							<image class="analyseMainItems_right" src="/static/img/hotIcon.png"></image>
						</view>
						<view class="analyseMainItems">
							<view class="analyseMainItems_left">
								<p>满意度指数<span
										:class="assessObj.satisIndex==1?'di':'gao'">{{assessObj.satisIndex==1?'低':'高'}}</span>
								</p>
								<p>{{assessObj.satisIndexDesc}}</p>
							</view>
							<image class="analyseMainItems_right" src="/static/img/upsetIcon.png"></image>
						</view>
						<view class="analyseMainItems">
							<view class="analyseMainItems_left">
								<p>复购率<span
										:class="assessObj.repurchaseRate==1?'di':'gao'">{{assessObj.repurchaseRate==1?'低':'高'}}</span>
								</p>
								<p>{{assessObj.repurchaseRateDesc}}</p>
							</view>
							<image class="analyseMainItems_right" src="/static/img/shopeIcon.png"></image>
						</view>
					</view>
				</view>
				<view class="analyseBox" @click="goPack(`/package/analyse/index?index=1&month=${assessObj.month}`)">
					<view class="pages_intelligenceHeard">
						<view class="pages_intelligenceHeardLeft">市场供应指数：<span
								:class="assessObj.supplyIndex==1?'rxiao':'hot'">{{assessObj.supplyIndex==1?'弱':'强'}}</span>
						</view>
						<view class="pages_informationHeardrIGHT">
							<u-icon name="arrow-right" color="#333" size="26rpx" label="查看数据" labelPos="left"
								labelSize="26rpx" labelColor="#333"></u-icon>
						</view>
					</view>
					<view class="analyseMain">
						<view class="analyseMainItems">
							<view class="analyseMainItems_left">
								<p>商家经营状态<span
										:class="assessObj.manageStatus==1||assessObj.manageStatus==2?'rxiao':'hot'">{{assessObj.manageStatus==1||assessObj.manageStatus==2?'弱':'强'}}</span>
								</p>
								<p>{{assessObj.manageStatusDesc}}</p>
							</view>
							<image class="analyseMainItems_right" src="/static/img/shopIcon.png"></image>
						</view>
						<view class="analyseMainItems">
							<view class="analyseMainItems_left">
								<p>开店率<span
										:class="assessObj.openRate==1?'rxiao':'hot'">{{assessObj.openRate==1?'弱':'强'}}</span>
								</p>
								<p>{{assessObj.openRateDesc}}</p>
							</view>
							<image class="analyseMainItems_right" src="/static/img/open.png"></image>
						</view>
						<view class="analyseMainItems">
							<view class="analyseMainItems_left">
								<p>关店率<span
										:class="assessObj.closeRate==1?'rxiao':'hot'">{{assessObj.closeRate==1?'弱':'强'}}</span>
								</p>
								<p>{{assessObj.closeRateDesc}}</p>
							</view>
							<image class="analyseMainItems_right" src="/static/img/closeIcon.png"></image>
						</view>
					</view>
				</view>
			</view>



			<p class="pages_end">- 章鱼小数据·版权所有 -</p>

		</view>
		<view v-else class="kong">
			<load v-if="isLoading==1" @updataIsLoading="updataIsLoading" :isLoading="isLoading"></load>
			<empty v-else-if="isLoading==0"></empty>
		</view>

	</view>

</template>

<script>
	import myTabs from "@/components/myTabs/index.vue"
	import load from "@/components/load/index.vue"
	import empty from "@/components/empty/index.vue"

	export default {
		components: {
			empty,
			load,
			myTabs
		},
		data() {
			return {
				isLoading: 1,
				title: '品类现状评估',
				colour: [{
						bg: '#FFDA2D',
						name: '弱'
					},
					{
						bg: '#415FFF',
						name: '低'
					},
					{
						bg: '#FF8900',
						name: '高'
					},
					{
						bg: '#FF471C',
						name: '强'
					}
				],
				assessObj: null,
				businessId: '',
				tastText: '加载中',
				myDirection: 0,
				isFx: -1,
				barArr: [{
						bjColor: '#fff8c6',
						dianColor: '#ffdf13',
						text: '衰退市场'
					},
					{
						bjColor: '#d1d8fd',
						dianColor: '#415FFF',
						text: '机会市场'
					},
					{
						bjColor: '#ffe3c2',
						dianColor: '#ff8900',
						text: '成熟市场'
					},
					{
						bjColor: '#ffd3c8',
						dianColor: '#ff471c',
						text: '增长市场'
					},
				]
			}
		},
		onLoad(oprtions) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			if (oprtions) {
				this.businessId = oprtions.businessId;
			}
			this.init();
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
			imgSrc() {
				return this.$store.state.imgSrc;
			},
		},
		filters: {
			ff_month(val) {
				let year = new Date(val).getFullYear();
				let moth = new Date(val).getMonth() + 1 < 10 ? `0${new Date(val).getMonth()+1}` : new Date(val)
					.getMonth() + 1;
				let day = new Date(val).getDay() + 1 < 10 ? `0${new Date(val).getDay()+1}` : new Date(val).getDay() + 1;
				return `${year}年${moth}月${day}日`
			},
			ff_text(val) {
				let arr = ['慎重进入', '风险进入', '可以进入', '推荐进入'];
				if (val < 25) {
					return arr[0]
				} else if (val >= 25 && val < 50) {
					return arr[1]
				} else if (val >= 50 && val < 75) {
					return arr[2]
				} else {
					return arr[3]
				}
			}
		},
		methods: {
			updataIsLoading(index) {
				if (index == 2) {
					this.isLoading = this.assessObj ? index : 0;
				}
			},
			goPack(url) {
				uni.navigateTo({
					url
				})
			},
			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					urls: [myImgs],
					current: index
				})
			},
			init(businessId) {
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// })
				let location = uni.getStorageSync('location');
				let categoryId = uni.getStorageSync('variety').children[0].id;
				let req = {
					categoryId: categoryId,
					cityId: location.id
				}
				this.$api.analysisBusinessGet(req).then(res => {
					if (res.code == 200) {
						uni.hideLoading();
						this.assessObj = res.data;
						this.isLoading = 1;
						// 商机指数牌
						setTimeout(() => {
							let radio = this.assessObj.marketIndex / 100;
							if (this.assessObj.marketIndex < 20) {
								this.myDirection = radio * 638 - 24;
								this.isFx = 0;
							} else if (this.assessObj.marketIndex > 80) {
								this.myDirection = radio * 638 - 218;
								this.isFx = 1;
							} else {
								this.myDirection = radio * 638 - 121;
								this.isFx = 2;
							}
						}, 800)

					} else if (res.code == 504) {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: res.msg
						})
						setTimeout(() => {

							uni.redirectTo({
								url: '/package/marketing/index'
							})
						}, 1000)
					} else {
						this.isLoading = 1;
						uni.hideLoading();
						this.assessObj = null;
						this.tastText = '暂无内容'
					}
				})
			},

			goBlack() {
				uni.navigateBack();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.pages_intelligence {
		background-color: #F0F0F0;
		height: 100vh;
		box-sizing: border-box;
		overflow: scroll;
		position: relative;

		.assessHeardImg {
			position: absolute;
			width: 100%;
		}

		/deep/.u-line-progress {
			overflow: inherit !important;
		}

		/deep/.u-line-progress__line {
			border-radius: 100px 0 0 100px !important;
			border: 2rpx solid #fff !important;

			// border-right: 6rpx solid #000 !important;
			&::after {
				content: '';
				width: 6rpx;
				height: 40rpx;
				border-radius: 36rpx;
				background: #000;
				position: absolute;
				right: -3rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.analyseTitleBox {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 16rpx 0 24rpx;

			span {
				display: inline-block;
			}

			span:nth-child(1) {
				width: 10rpx;
				height: 10rpx;
				border-radius: 2rpx;
				margin-right: 8rpx;
			}

			span:nth-child(2) {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.analyseTitleBoxItems {
			display: flex;
			align-items: center;
			flex: 0 0 100rpx;
			justify-content: center;
		}


		.assess_heardBox {
			position: absolute;
			left: 0;
			width: 100%;
			margin: 68rpx 0;

			p {
				text-align: center;
			}

			p:nth-child(1) {
				height: 56rpx;
				font-size: 40rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 56rpx;
				color: #343434;
				margin-bottom: 8rpx;
			}

			p:nth-child(2) {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #343434;
			}
		}

		.assessBoxpdIcon {
			width: 150rpx;
			height: 150rpx;
			position: absolute;
			right: 0;
			top: 0;
		}

		.cyinBgBox {
			border-radius: 24rpx;
			margin: 24rpx 0;
			width: 100%;
			height: 500rpx;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.assessBox {
			width: 686rpx;

			// top: ;
			background: #fff;
			border-radius: 24rpx;
			padding: 24rpx;
			box-sizing: border-box;

		}

		.assessBoxBig {
			left: 50%;
			transform: translateX(-50%);
			position: absolute;
			width: 686rpx;
		}

		.assessBoxOne {
			p {
				text-align: center;
			}

			p:nth-child(1) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #666666;
			}

			p:nth-child(2) {
				height: 56rpx;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: 550;
				line-height: 56rpx;
				color: #333333;
				margin-top: 8rpx;
			}

			p:nth-child(3) {
				width: 100%;
				padding: 24rpx;
				box-sizing: border-box;
				border-radius: 24rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 40rpx;
				color: #333333;
				position: relative;
				background: #FFDA2D;
				margin-top: 22rpx;
				margin-bottom: 24rpx;

				&::after {
					content: "";
					width: 0;
					height: 0;
					border: 20rpx transparent solid;
					border-bottom: 20rpx #FFDA2D solid;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: -40rpx;
				}
			}

			p:nth-child(4) {
				height: 32rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 32rpx;
				color: #CCCCCC;
				margin: 24rpx 0;
			}
		}

		.kong {
			height: 100%;
			width: 100%;
		}

		.assessBoxOne_progressBar {
			padding-top: 92rpx;
			position: relative;
		}

		.assessBoxOne_progressBarTast {
			height: 48rpx;
			line-height: 48rpx;
			width: 240rpx;
			padding: 6rpx 0rpx;
			padding-left: 15rpx;
			border-radius: 11rpx;
			background: #ffda2d;
			position: absolute;
			top: 20rpx;
			font-weight: 550;


		}

		.assessBoxOne_progressBarTastmy {
			display: inline-block;
			width: 0;
			height: 0;
			border: 10rpx solid transparent;
			border-top: 10rpx solid #ffda2d;
			position: absolute;
			bottom: -20rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.fxLeft {
			left: 10%;
		}

		.fxRight {
			left: 90%;
		}

		.assessBoxOne_progressBarBox {
			width: 100%;
			height: 66rpx;
			display: flex;
			align-items: center;
			border-radius: 12rpx;
			background: linear-gradient(90deg, #fff7c4 0% 25%, #d1d8fe 24% 50%, #ffe3c2 50% 75%, #ffd3c8 75% 100%);
		}

		.assessBoxOne_progressBarBoxs {
			width: 100%;
			height: 66rpx;
			display: flex;
		}

		.assessBoxOne_progressBarBoxItrems {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;

			span {
				display: inline-block;
			}

			span:nth-child(1) {
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;

			}

			span:nth-child(2) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #333333;
				margin-left: 6rpx;
			}

		}

		.assessVerdictBox {
			width: 100%;
			box-sizing: border-box;
			padding: 24rpx;
			background: #fffbe5;
			border-radius: 24rpx;
			text-align: center;
			font-size: 26rpx;
			color: #333333;
			// margin-top: 24rpx;
		}


		.assessVerdictBox_top {
			display: flex;
			box-sizing: border-box;
		}

		.assessVerdictBox_topLeft {
			flex: 1;

			p:nth-child(1) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #999999;
			}

			p:nth-child(2) {
				height: 74rpx;
				font-size: 52rpx;
				font-family: DIN;
				font-weight: bold;
				line-height: 74rpx;
				color: #333333;
				margin: 4rpx 0 24rpx 0;
			}
		}

		.assessVerdictBox_botton {
			width: 100%;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #999999;

			span {
				color: #000;
			}
		}

		.analyseTitle {
			text-align: center;
			width: 100%;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 34rpx;
			color: #333333;
			margin: 24rpx 0 16rpx;
		}

		.analyseBox {
			width: 100%;
			background: #f7f7f7;
			border-radius: 24rpx;
		}

		.pages_intelligenceHeard {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 24rpx;
			border-bottom: 1rpx solid #e5e5e5;
		}

		.myRecomme {
			padding: 0;
			border-bottom: none;
			display: flex;
			flex-direction: column;

			.pages_informationHeardrP {
				padding-left: 20rpx;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #999999;
			}
		}

		.pages_intelligenceHeardLeft {
			// border-left: 8rpx solid #FFDA2D;
			height: 44rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			line-height: 44rpx;
			color: #333333;
			position: relative;
			padding-left: 16rpx;
			display: flex;
			align-items: center;

			&::after {
				content: "";
				width: 8rpx;
				height: 28rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #FFDA2D;

			}

			span {
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 40rpx;
				text-align: center;
				color: #000000;

			}
		}

		.pages_informationHeardrIGHT {
			display: flex;
			align-items: center;
			background-color: #FDDE4D;
			padding: 0 8rpx 0 16rpx;
			border-radius: 8rpx;

			span {
				display: inline-block;
				height: 36rpx;
				font-size: 26rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 36rpx;
				color: #999;
			}

			image {
				margin-left: 4rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.analyseMainItems_right {
			width: 64rpx;
			height: 64rpx;
			margin: 0 40rpx;
		}

		.analyseMain {
			padding: 0 24rpx;
			margin-bottom: 24rpx;
		}

		.analyseMainItems {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #e5e5e5;
			padding: 24rpx 0;
		}

		.analyseMainItems_left {
			flex: 1;

			p:nth-child(1) {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 40rpx;
				color: #999;

				span {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: 蘋方-簡;
					font-weight: bold;
					line-height: 40rpx;
					text-align: center;
					color: #000000;
					margin-left: 6rpx;
				}
			}

			p:nth-child(2) {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #999999;
				margin-top: 8rpx;
			}
		}

		.rxiao {
			background: #fbe88d !important;
		}

		.hot {
			background: #ffd3c8 !important;
		}

		.gao {
			background: #ffe3c2 !important;
		}

		.di {
			background: #c4ccf9 !important;
		}

		.pages_end {
			padding: 32rpx 0 48rpx 0;
			text-align: center;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #CCCCCC;
		}


		.recommendMain {
			width: 100%;
			margin-top: 24rpx;

		}

		.recommendItems {
			background: #f7f7f7;
			border-radius: 24rpx;
			display: flex;
			position: relative;
			margin-bottom: 16rpx;
			padding: 24rpx;

		}

		.recommendItemsLeft {
			flex: 0 0 90%;

			view:nth-child(1) {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 40rpx;
				color: #000000;
				box-sizing: border-box;
			}

			view:nth-child(2) {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #999999;
				margin-top: 8rpx;

			}
		}

		.recommendItemsRight {
			width: 130rpx;
			height: 130rpx;
			position: absolute;
			bottom: 0;
			right: 0;
		}

		.recommendBox {
			width: 100%;
			background: #fff;
			margin-top: 16rpx;
			padding: 24rpx;
			box-sizing: border-box;
			border-radius: 24rpx;
		}




	}
</style>
